﻿/*
 *  文档名称 ：editor
 *  文档描述 ：编辑器css（使用本css，必须在本文件之前按顺序引用basic.css与dropDownList.css）。
 *  文档状态 ：1.0.1.2
 *  本次修改 ：代码样式css的添加。
 *  开发浏览器信息 ：firefox 20.0+、chrome 26.0+、IE 10+、基于webkit的手机浏览器
 */

.editor {
	font-family : 宋体;
}
.editor ul {
	height : 34px;
	padding : 6px 10px;
	white-space : nowrap;
}
.editor li[data-group]:not(:last-child)::after {
	content : "";
	width : 1px;
	background-color : #383838;
}
.editor li[data-group]::after,
.editor li[data-group] >* {
	margin-right : 12px;
}
.editor .colorPicker {
	margin-top : 2px;
}
.editor .imageFileInput,
.editor .simpleButton {
	margin-top : 2px;
}
.editor .fontAppearance {
	margin-top : 1px;
}
.editor .fontAppearance button[data-category="2"][data-focus],
.editor .fontAppearance button[data-category="3"][data-focus] {
	background-color : transparent;
}
.editor img {
	display : inline-block;
}

.colorPicker {
	height : 18px;
	width : 26px;
	-webkit-user-select : none;
	-moz-user-select : none;
	-ms-user-select : none;
	user-select : none;
}
.colorPicker > p {
	position : relative;
}
.colorPicker > p, .colorPicker > p > button {
	width : 100%;
	height : 100%;
}
.colorPicker > p::before,
.colorPicker > p::after,
.colorPicker dd q::before,
.colorPicker dd q::after {
	content : "";
	position : absolute;
	width : 50%;
	height : 50%;
	background-color : #d5d5d5;
}
.colorPicker > p::before,
.colorPicker dd q::before {
	left : 0;
	top : 0;
}
.colorPicker > p::after,
.colorPicker dd q::after {
	bottom : 0;
	right : 0;
}
.colorPicker > p > button {
	background-color : #f00;
	border-radius : 0;
	position : relative;
	z-index : 2;
	vertical-align : top;
	border : 1px solid transparent;
	background-clip : content-box;
}
.colorPicker figure {
	background-color : #e6e6e6;
	padding : 10px;
	width : 222px;
}
.colorPicker nav {
	height : 150px;
}
.colorPicker nav > p {
	width : 160px;
	position : relative;
}
.colorPicker nav > p > button {
	width : 8px;
	height : 8px;
	position : absolute;
	top : 0;
	right : 0;
	margin : -3px;
	border-color : #fff;
	background-color : rgba(0, 0, 0, 0.2);
}
.colorPicker nav > aside {
	margin-left : 12px;
	width : 28px;
	position : relative;
}
.colorPicker canvas {
	cursor : default;
}
.colorPicker nav > aside > button {
	width : 32px;
	height : 4px;
	border-radius : 0;
	position : absolute;
	left : 0;
	top : 100%;
	margin : -2px;
	box-shadow : inset 0 0 1px #000;
}
.colorPicker dt {
	padding : 3px 0;
}
.colorPicker dt > button {
	width : 128px;
	height : 4px;
	background-color : #bbb;
	vertical-align : middle;
	margin-left : 8px;
	text-align : left;
	overflow : visible;
	left : 100%;
}
.colorPicker dt > button::before {
	content : "";
	display : inline-block;
	position : relative;
	width : 8px;
	height : 12px;
	margin : -4px;
	left : inherit;
	vertical-align : top;
	background-color : #555;
}
.colorPicker dd > blockquote {
	height : 24px;
	padding : 0 3px;
	text-align : center;
}
.colorPicker dd q {
	width : 24px;
	position : relative;
}
.colorPicker q > span {
	display : block;
	width : 100%;
	height : 100%;
	background-color : #f00;
	position : relative;
	z-index : 2;
}
.colorPicker dd input {
	width : 156px;
	padding : 0 4px;
	line-height : 22px;
	margin-left : 10px;
	border : 1px solid transparent;
	background-color : transparent;
}
.colorPicker dd input:hover,
.colorPicker dd input:focus {
	border-color : #8faaaa;
	background-color : #eee;
}
.colorPicker dd > p {
	height : 22px;
	text-align : right;
	margin-top : 4px;
}
.colorPicker dd button {
	height : 100%;
	line-height : 20px;
	margin-left : 6px;
	padding : 0 6px;
}

.imageFileInput, .simpleButton {
	width : 22px;
	height : 18px;
	overflow : hidden;
}
.imageFileInput {
	background : url(image/w24.png) 0 0 no-repeat;
}

.simpleButton > button {
	width : 100%;
	height : 100%;
	border-radius : 0;
	vertical-align : top;
}
.simpleButton[data-action="insertAnchor"] > button {
	background : url(image/w24.png) 0 -45px no-repeat;
}
.simpleButton[data-action="left"] > button {
	background : url(image/w24.png) 3px -98px no-repeat;
}
.simpleButton[data-action="center"] > button {
	background : url(image/w24.png) 3px -123px no-repeat;
}
.simpleButton[data-action="right"] > button {
	background : url(image/w24.png) 3px -98px no-repeat;
	-webkit-transform : scaleX(-1);
	transform : scaleX(-1);
}

.fontAppearance {
	font-size : 14px;
	width : 98px;
	height : 20px;
	line-height : 20px;
}
.fontAppearance button {
	width : 20px;
	height : 100%;
	border-radius : 0;
	vertical-align : top;
}
.fontAppearance button:not(:first-child) {
	margin-left : 6px;
}
.fontAppearance button:hover {
	color : #fd7;
}
.fontAppearance button[data-focus] {
	background-color : rgba(0, 0, 0, 0.3);
}
.fontAppearance button[data-category="0"] {
	font-weight : bold;
}
.fontAppearance button[data-category="1"] {
	font-style : italic;
	text-indent : -4px;
}
.fontAppearance button[data-category="2"] {
	text-decoration : underline;
}
.fontAppearance button[data-category="3"]:hover {
	background-color : #ff0;
	color : #333;
}

.contentArea {
	padding : 10px;
	white-space : pre-wrap;
	word-wrap : normal;
	word-break : break-word;
	overflow : auto;
	min-height : 300px;
}
.contentArea::selection,
.contentArea *::selection {
	background-color : #ccc;
	color : inherit;
}
.contentArea::-moz-selection,
.contentArea *::-moz-selection {
	background-color : #ccc;
	color : inherit;
}

.codeEditor {
	border : 1px solid #a3a3a3;
}
.codeEditor > article {
	position : relative;
	min-height : 300px;
}
.codeEditor > article > * {
	position : absolute;
	top : 0;
	bottom : 0;
}
.codeEditor > article > aside {
	width : 40px;
	left : 0;
}
.codeEditor > article > section {
	right : 0;
	left : 46px;
}

.codeLine {
	counter-increment : codeLine;
	position : relative;
	padding-left : 4.5em;
	min-height : 1.5em;
}
.codeLine::before {
	background-color : #2c2c2c;
	content : counter(codeLine);
	color : #b3d5b3;
	width : 4em;
	position : absolute;
	left : 0;
	top : 0;
	bottom : 0;
	padding : 0 0.5em;
	text-align : right;
}
.codeLine > br {
	display : none;
}
.codeLine span[data-descriptor] {
	color : #e6db74;
}
.codeLine span[data-descriptor="comment"] {
	color : #72A572;
}
.codeLine span[data-descriptor="keyword"] {
	color : #f92672;
}
.codeLine span[data-descriptor="number"] {
	color : #f90;
}
.codeLine span[data-descriptor="operator"] {
	color : #aaf;
}
.codeLine span[data-descriptor="func"] {
	color : #0cf;
}
.codeLine span[data-descriptor="tab"] {
	width : 28px;
	overflow : hidden;
	vertical-align : top;
	display : inline-block;
}


.codeArea {
	font-family : Consolas, 'Lucida Console', monospace;
	padding : 0;
	height : 100%;
	border : 1px solid #666;
	background-color : #202020;
}
